<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../lib/vue.js"></script>
</head>
<body>
    <div id="box">
        <!-- 这段代码放在这里位置不合适,这种问题叫模板过重，难以维护 -->
        <!-- {{myName.substring(0,1).toUpperCase() + myName.substring(1)}} -->
        <!-- 可以用计算属性解决 -->
        {{ myComputedName }}

        <div>
            计算属性
            <div>{{}}</div>
        </div>
    </div>

    <script>
        //在这里vm的变量定义不能使用let，暂时不清楚原因
        var vm = new Vue({
            el: "#box",
            data: {
                myName: "keywin"
            },
            methods: {
                /**定义属性和写一个函数返回，从结果上看没有区别
                    在methods中return不是必须的，计算属性必须有return
                    1).methods方法和computed计算属性，两种方式的最终结果确实是完全相同
                    2).不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们
                        才会重新求值，多次访问 getAge 计算属性会立即返回之前的计算结果，而不必再次执行函数。
                    3).methods方法，每当触发重新渲染时，调用方法将总会再次执行函数。
                    4).所以，官网的一句话，对于任何复杂逻辑，你都应当使用计算属性。
                **/
            },
            //定义计算属性的地方
            computed: {
                myComputedName() {
                    // 在函数中返回结果，显示在页面上
                    return this.myName.substring(0,1).toUpperCase() + this.myName.substring(1)
                }
            }
        })
    </script>
</body>
</html>